<template>
  <el-row>
    <el-col>
      <!--<el-menu
        default-active="2"
        style="height: 100%"
        class="el-menu-vertical-demo">
        <el-submenu index="1">
          <template slot="title">
            <span>系统设置</span>
          </template>
          <el-menu-item index="/org" @click="selectRouter('/org', '组织架构')">组织架构</el-menu-item>
          <el-menu-item index="/roleAndAuth" @click="selectRouter('/roleAndAuth', '角色权限')">角色权限</el-menu-item>
          <el-menu-item index="/personAuth" @click="selectRouter('/personAuth', '人员授权')">人员授权</el-menu-item>
          <el-menu-item index="/systemLog" @click="selectRouter('/systemLog', '系统日志')">系统日志</el-menu-item>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title">
            <span>实训室管理</span>
          </template>
          <el-menu-item index="/trainBase" @click="selectRouter('/trainBase', '实训基地')">实训基地</el-menu-item>
          <el-menu-item index="/building" @click="selectRouter('/building', '实训建筑')">实训建筑</el-menu-item>
          <el-menu-item index="/trainRoom" @click="selectRouter('/trainRoom', '实训室数据')">实训室数据</el-menu-item>
          <el-menu-item index="/trainPerformance" @click="selectRouter('/trainPerformance', '预期绩效')">预期绩效</el-menu-item>
        </el-submenu>
        <el-submenu index="3">
          <template slot="title">
            <span>设备管理</span>
          </template>
          <el-menu-item index="/document" @click="selectRouter('/document', '设备建档')">设备建档</el-menu-item>
          <el-menu-item index="/equipmentAttr" @click="selectRouter('/equipmentAttr', '设备属性')">设备属性</el-menu-item>
          <el-menu-item index="/equipmentList" @click="selectRouter('/equipmentList', '设备预约')">设备预约</el-menu-item>
          &lt;!&ndash;<el-menu-item index="/listManagement" @click="selectRouter('/listManagement', '设备审批')">设备审批</el-menu-item>
          <el-menu-item index="/equipmentListLog" @click="selectRouter('/equipmentListLog', '预约记录')">预约记录</el-menu-item>&ndash;&gt;
          <el-menu-item index="/receiveLog" @click="selectRouter('/receiveLog', '领用记录')">领用记录</el-menu-item>
          <el-menu-item index="/returnLog" @click="selectRouter('/returnLog', '归还记录')">归还记录</el-menu-item>
          <el-menu-item index="/borrowLog" @click="selectRouter('/borrowLog', '借用情况')">借用情况</el-menu-item>
          <el-menu-item index="/damageLog" @click="selectRouter('/damageLog', '损坏登记')">损坏登记</el-menu-item>
          <el-menu-item index="/maintenance" @click="selectRouter('/maintenance', '设备维修档案')">设备维修档案</el-menu-item>
          <el-menu-item index="/batchMaintenance" @click="selectRouter('/batchMaintenance', '设备维保')">设备维保</el-menu-item>
          <el-menu-item index="/eqArchives" @click="selectRouter('/eqArchives', '设备档案')">设备档案</el-menu-item>
          <el-menu-item index="/scrapDisposal" @click="selectRouter('/scrapDisposal', '报废处置')">报废处置</el-menu-item>
          <el-menu-item index="/scrapRecord" @click="selectRouter('/scrapRecord', '报废记录')">报废记录</el-menu-item>
        </el-submenu>
        &lt;!&ndash;<el-submenu index="4">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span>耗材管理</span>
          </template>
          <el-menu-item index="/materialData" @click="selectRouter('/materialData', '采购入库')">采购入库</el-menu-item>
          <el-menu-item index="/warehousingAudit" @click="selectRouter('/warehousingAudit', '入库审核')">入库审核</el-menu-item>
          <el-menu-item index="/consumableItems" @click="selectRouter('/consumableItems', '耗材预警')">耗材预警</el-menu-item>
          <el-menu-item index="/earlyWarning" @click="selectRouter('/earlyWarning', '耗材列表')">耗材列表</el-menu-item>
          <el-menu-item index="/plan" @click="selectRouter('/plan', '采购计划')">采购计划</el-menu-item>
          <el-menu-item index="/approval" @click="selectRouter('/approval', '采购审批')">采购审批</el-menu-item>
          <el-menu-item index="/purchaseRecord" @click="selectRouter('/purchaseRecord', '采购记录')">采购记录</el-menu-item>
          <el-menu-item index="/consuming" @click="selectRouter('/consuming', '领用申请')">领用申请</el-menu-item>
          <el-menu-item index="/consumAudit" @click="selectRouter('/consumAudit', '领用审批')">领用审批</el-menu-item>
          <el-menu-item index="/deliveryRecord" @click="selectRouter('/deliveryRecord', '出库记录')">出库记录</el-menu-item>
          <el-menu-item index="/scrapApply" @click="selectRouter('/scrapApply', '报废申请')">报废申请</el-menu-item>
          <el-menu-item index="/scrapApprove" @click="selectRouter('/scrapApprove', '报废审批')">报废审批</el-menu-item>
          <el-menu-item index="/scrapDispose" @click="selectRouter('/scrapDispose', '报废处理')">报废处理</el-menu-item>
        </el-submenu>
        <el-submenu index="5">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span>课程管理</span>
          </template>
          <el-menu-item index="/CurriculumProvision" @click="selectRouter('/CurriculumProvision', '课程设置')">课程设置</el-menu-item>
          <el-menu-item index="/stadEval" @click="selectRouter('/stadEval', '课程列表')">课程列表(学生)</el-menu-item>
          <el-menu-item index="/teacherList" @click="selectRouter('/teacherList', '课程列表')">课程列表(老师)</el-menu-item>
        </el-submenu>
        <el-submenu index="6">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>授课管理</span>
          </template>
          <el-menu-item index="/courseEvaluation" @click="selectRouter('/courseEvaluation', '课程评价')">课程评价</el-menu-item>
          <el-menu-item index="/teacherLog" @click="selectRouter('/teacherLog', '教学工作日志')">教学工作日志</el-menu-item>
          <el-menu-item index="/explorer" @click="selectRouter('/explorer', '教学资源管理')">教学资源管理</el-menu-item>
          <el-menu-item index="/teacherTask" @click="selectRouter('/teacherTask', '实训任务布置')">实训任务布置</el-menu-item>
          <el-menu-item index="/studentsUpload" @click="selectRouter('/studentsUpload', '学生作业上传')">学生作业上传</el-menu-item>
          <el-menu-item index="/teachingLearning" @click="selectRouter('/teachingLearning', '教学互动')">教学互动</el-menu-item>
        </el-submenu>
        <el-submenu index="7">
          <template slot="title">
            <i class="el-icon-document"></i>
            <span>成绩管理</span>
          </template>
          <el-menu-item index="/gradeManagement" @click="selectRouter('/gradeManagement', '学生成绩管理')">学生成绩管理</el-menu-item>
          <el-menu-item index="/totalScore" @click="selectRouter('/totalScore', '学生总评成绩')">学生总评成绩</el-menu-item>
        </el-submenu>&ndash;&gt;
        <el-submenu index="8">
          <template slot="title">
            <span>安全准入管理</span>
          </template>
          <el-menu-item index="/questionBank" @click="selectRouter('/questionBank', '题库')">题库</el-menu-item>
          <el-menu-item index="/study" @click="selectRouter('/study', '学习')">学习</el-menu-item>
          <el-menu-item index="/evaluation" @click="selectRouter('/evaluation', '测评')">测评</el-menu-item>
        </el-submenu>
        <el-submenu index="9">
          <template slot="title">
            <span>安全培训管理</span>
          </template>
          <el-menu-item index="/trainPlan" @click="selectRouter('/trainPlan', '培训计划')">培训计划</el-menu-item>
          <el-menu-item index="/trainCount" @click="selectRouter('/trainCount', '培训内容')">培训内容</el-menu-item>
          <el-menu-item index="/questionBank" @click="selectRouter('/questionBank', '题库')">题库</el-menu-item>
          <el-menu-item index="/evaluation" @click="selectRouter('/evaluation', '测试')">测试</el-menu-item>
        </el-submenu>
        <el-submenu index="10">
          <template slot="title">
            <span>安全检查管理</span>
          </template>
          <el-menu-item index="/inspectDay" @click="selectRouter('/inspectDay', '日常检查')">日常检查</el-menu-item>
          <el-menu-item index="/specilInspect" @click="selectRouter('/specilInspect', '专项检查')">专项检查</el-menu-item>
          <el-menu-item index="/changeLog" @click="selectRouter('/changeLog', '整改记录')">整改记录</el-menu-item>
          <el-menu-item index="/changeAppflow" @click="selectRouter('/changeAppflow', '整改审批')">整改审批</el-menu-item>
        </el-submenu>
        <el-menu-item index="/useRatio" @click="selectRouter('/useRatio', '利用率')">
          <span slot="title">利用率</span>
        </el-menu-item>
        <el-menu-item index="/TeachingStatements" @click="selectRouter('/TeachingStatements', '教学报表')">
          <span slot="title">教学报表</span>
        </el-menu-item>
        <el-menu-item index="/deviceStanment" @click="selectRouter('/deviceStanment', '设备报表')">
          <span slot="title">设备报表</span>
        </el-menu-item>
        <el-menu-item index="/home" @click="selectRouter('/home', '绩效大屏')">
          <span slot="title">绩效大屏</span>
        </el-menu-item>
      </el-menu>-->
      <el-radio-group size="mini" v-model="isCollapse" style="margin-left: 35px;">
        <el-radio-button v-show="isCollapse === true" :label="false">
          <i style="font-size: 20px" class="el-icon-s-unfold"></i></el-radio-button>
        <el-radio-button v-show="isCollapse === false" size="mini" :label="true">
          <i style="font-size: 20px" class="el-icon-s-fold"></i></el-radio-button>
      </el-radio-group>
      <el-menu
              :default-active="defultRouter"
              style="height: 100%"
              :collapse="isCollapse"
              unique-opened
              class="el-menu-vertical-demo">
        <template v-for="(item,index) in menuList">
          <el-submenu
                  v-if="!item.nodeUrl"
                  :key="index"
                  :index="item.nodeName"
          >
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>{{item.nodeName}}</span>
            </template>
            <template v-for="value in item.powerList">
              <el-menu-item :index="value.nodeUrl" @click="selectRouter(value)">
                {{value.nodeName}}
              </el-menu-item>
            </template>
          </el-submenu>
          <el-menu-item :key="index" :index="item.nodeUrl" @click="selectRouter(item)" v-else>
            <span slot="title">{{ item.nodeName }}</span>
          </el-menu-item>
        </template>
      </el-menu>
    </el-col>
  </el-row>
</template>

<script>
  export default {
    name: "slider",
    data() {
      return {
        isCollapse: true,
        defultRouter: 'home',
        menuList: JSON.parse(localStorage.getItem('userMsg')).power
      }
    },
    methods: {
      selectRouter(list) {
        console.log(list)
        this.defultRouter = list.nodeUrl;
        this.$router.replace(list.nodeUrl);
        this.$store.commit('setHeadTag', {index: list.nodeUrl, name: list.nodeName})
      }
    }
  }
</script>

<style scoped lang="scss">
  /deep/.el-radio-button--mini .el-radio-button__inner {
    padding: 4px;
  }
</style>
